<script setup>
import { onMounted } from 'vue'
import { Leafer, Line } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

onMounted(() => {
    const leafer = new Leafer({
        view: 'line-viewer'
    })

    const line = new Line({
        points: [10, 100, 40, 100, 110, 20, 140, 20],
        cornerRadius: 8,
        strokeWidth: 1,
        stroke: 'rgb(50,205,121)',
        cap: 'round'
    })

    const arrow = new Arrow({
        points: [10, 200, 40, 200, 210, 20, 240, 20],
        cornerRadius: 16,
        strokeWidth: 1,
        stroke: 'rgb(50,205,121)',
        startArrow: 'circle',
        endArrow: 'circle',
        startArrowSize: 20,
        endArrowSize: 20
    })

    leafer.add(arrow)
    leafer.add(line)
})
</script>

<template>
    <div id="line-viewer" style="width: 100%; height: 100%;background: #eee;"></div>
</template>

